import './index.scss'
import React from 'react';
import { Outlet as RouterOutlet } from 'react-router-dom';
import { Flex, Layout, Card } from 'antd';
import Sidebar from '../components/sidebar/Sidebar';
import HomeHeader from '../components/header';
const { Header, Footer, Content } = Layout;

const layoutStyle = {
  width: '100%',
  height: '100%',
};
const Home = () => (
  <Flex className='home-flex' gap="middle" wrap>
    <Layout style={layoutStyle}>
      <Sidebar className='home-sidebar' />
      <Layout>
        <Header className='home-header'>
          
          <Card className='home-header-card'>
            <HomeHeader/>
          </Card>
        </Header>
        <Content className='home-content'>
          <Card className='home-content-card'>
            <RouterOutlet />
          </Card>  
        </Content>
        <Footer className='home-footer'>
          <Card className='home-footer-card'>
            Footer
          </Card>
        </Footer>
      </Layout>
    </Layout>
  </Flex>
);
export default Home;